<template>
  <div>
    <!-- 轮播图 -->
    <el-carousel height="400px">
      <el-carousel-item v-for="item in images" :key="item.id">
        <img :src="item.image" style="height: 400px" />
      </el-carousel-item>
    </el-carousel>

    <!-- 筛选菜单 -->
    <div class="table" style="height: 125px">
      <div style="width: 100%; display: flex" v-if="isShowbrand">
        <div class="title">品类</div>
        <div class="content">
          <div
            class="item"
            v-for="(item, index) in filterMenu.brand"
            :key="index"
            @click="handleClick(item, 'brand')"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div style="width: 100%; display: flex" v-if="isShowPrice">
        <div class="title">价格</div>
        <div class="content">
          <div
            class="item"
            v-for="(item, index) in filterMenu.price"
            :key="index"
            @click="handleClick(item, 'price')"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div style="width: 100%; display: flex" v-if="isShowType">
        <div class="title">类型</div>
        <div class="content">
          <div
            class="item"
            v-for="(item, index) in filterMenu.type"
            :key="index"
            @click="handleClick(item, 'type')"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选条件标签 -->
    <el-tag
      v-for="(item, index) in choiceTag"
      :key="index"
      closable
      @close="handleClose(index)"
      style="margin-right: 10px"
    >
      {{ item.value }}
    </el-tag>

    <!-- 商品列表 -->
    <div class="product-list">
      <ProductItem
        v-for="(item, index) in productList"
        :productData="item"
        :key="item.id + index"
      />
    </div>

    <!-- 分页 -->
    <el-pagination
      layout="pager"
      :total="30"
      @current-change="onChange"
    ></el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import ProductItem from "@/components/ProductItem.vue";
export default {
  components: {
    ProductItem,
  },
  data() {
    return {
      images: [], // 轮播图图片数组
      productList: [], // 商品列表数据
      filterMenu: {}, // 筛选菜单数据
      choiceTag: [], // 选择标签
      // 筛选菜单隐藏
      isShowbrand: true,
      isShowPrice: true,
      isShowType: true,
    };
  },
  created() {
    this.getCarousel();
    this.getProductList();
    this.getFilterMenu();
  },
  methods: {
    // 获取轮播图接口
    getCarousel: function () {
      axios.get("/v1/home/banner").then((res) => {
        // 判断code，如果== -90001，跳转回s登录页面
        if (res.data.code == -90001) {
          this.$router.push({
            name: "login",
          });
        }
        this.images = res.data;
      });
    },
    // 获取商品列表接口
    getProductList: function () {
      axios.get("/v1/home/phoneList").then((res) => {
        this.productList = res.data;
      });
    },
    // 获取筛选菜单
    getFilterMenu: function () {
      axios.get("/v1/home/filterMenu").then((res) => {
        this.filterMenu = res.data;
      });
    },
    // 分页切换
    onChange: function (page) {
      // console.log(page);
      this.$http.get(`/v1/home/phoneList?page=${page}`).then((res) => {
        // console.log(res.data);
        this.productList = res.data;
      });
    },
    // 筛选条件添加
    handleClick: function (item, type) {
      // console.log(type);
      // 将对应的筛选条件添加到 choiceTag 中
      if (type == "brand") {
        this.isShowbrand = false;
      } else if (type == "price") {
        this.isShowPrice = false;
      } else {
        this.isShowType = false;
      }
      this.choiceTag.push({
        value: item,
        type: type,
      });
      this.filterProduct(this.choiceTag);
    },
    // 关闭筛选条件
    handleClose: function (index) {
      console.log(index);
      console.log(this.choiceTag[0].type);
      let type = this.choiceTag[0].type;
      if (type == "brand") {
        this.isShowbrand = true;
      } else if (type == "price") {
        this.isShowPrice = true;
      } else if (type == "type") {
        this.isShowType = true;
      }
      this.choiceTag.splice(index, 1);
      this.filterProduct(this.choiceTag);
    },
    // 筛选数据
    filterProduct: function (choiceTag) {
      let query = "";
      choiceTag.map(function (item) {
        console.log(item);
        query += `${item.type}=${item.value}&`;
      });
      axios.get(`/v1/home/phoneList?${query}`).then((res) => {
        this.productList = res.data;
      });
    },
    /*  */
  },
};
</script>

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 60px;
}

.table {
  border-top: 1px solid #ddd;
  margin-top: 30px;
}

.title {
  width: 200px;
  height: 30px;
  line-height: 40px;
  text-align: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
}
.content {
  flex: 1;
  display: flex;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #ccc;
}
.item {
  padding: 0 10px;
  color: #005aa0;
  cursor: pointer;
}

.el-pagination {
  text-align: right;
  border: 1px solid #ccc;
}
img {
  /*设置图片宽度和浏览器宽度一致*/
  width: 100%;
}
</style>
